<template>
  <main>
    <div class="divMain" :style="Mainheight">
      <div class="search">

        <el-input
          class="searchInput"
          placeholder="请输入花型型号"
          v-model="getListData.keyword"
          clearable
        >
          <!-- <i slot="suffix" class="el-input__icon  el-icon-picture-outline"></i> -->
        </el-input>
        <div class="searchbutton" @click="searchbutton()">搜&nbsp;索</div>
         <el-button class="searchCZ" type="info" @click="searchCZ()">重置</el-button>

        <img
          style="position: absolute; top: 7px; left: 600px; padding: 12px"
          src="@/assets/Vector/picture.png"
          @click="ExpandPictureSearch"
        />

      </div>

      <div class="SelectCustomerBlock">
        <div class="SelectCustomerBlocks1" v-if="session.role_id == 1 || session.role_id == 3 || session.role_id == 4 || session.role_id == 5 || session.role_id == 6">
          <div class="SelectCustomers SelectCustomer1">
            选择客户<span style="color: red">*</span>:
          </div>
          <el-select v-model="customervalue" filterable placeholder="请选择客户">
            <el-option
              v-for="item in customers"
              :key="item.id"
              :label="item.username"
              :value="item.id"
            ></el-option>
          </el-select>
            <!-- <el-select
                  v-model="getListData.customervalue"
                  filterable
                  remote
                  reserve-keyword
                  placeholder="请输入客户"
                  :remote-method="getCustomer"
                  :loading="loading1"
                  value-key="id"
                >
                  <el-option
                    v-for="item in customers"
                    :key="item.id"
                    :label="item.username"
                    :value="item.id"
                  >
                  </el-option>
            </el-select> -->
        </div>

        <div class="SelectCustomerBlocks2">
          <div class="SelectCustomers SelectCustomer2">
            客户开发季<span style="color: red">*</span>:
          </div>
          <el-select
            v-model="DevelopmentSeasonvalue"
            filterable
            allow-create
            default-first-option
            placeholder="请选择客户开发季"
          >
            <el-option
              v-for="item in DevelopmentSeason"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </div>

        <div class="SelectCustomerBlocks3">
          <div class="SelectCustomers SelectCustomer3">
            客户开发年份<span style="color: red">*</span>:
          </div>
          <el-select v-model="yearvalue" filterable placeholder="请选择客户开发年份">
            <el-option
              v-for="item in year"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>

        </div>



      </div>

      <el-dialog
          title="裁切封面"
          :visible.sync="cropperModel"
          width="950px"
          center
         >
       <cropper-image
           :Name="cropperName"
           @b = "handleUploadSuccess"
           ref="child">
       </cropper-image>
      </el-dialog>
      <!--查看大封面-->
      <el-dialog
          title="查看大封面"
          :visible.sync="imgVisible"
          center>
        <img :src="imgName" v-if="imgVisible" style="width: 100%" alt="查看">
      </el-dialog>


      <div class="PictureSearch" :class="PictureSearchClass">
        <el-upload
          :action="post_url"
          name="img"
          class="upload-demo"
          :headers="headerObj"
          drag
          @click.native.prevent=""
          :file-list="fileLista"
          list-type="picture"
          :on-remove="del"
          :on-success="handleUploadSuccess"
        >
          <!--  -->
          <div @click="imgSaveToUrl('flagImg')" class="el-upload__text" ><i class="el-icon-upload"></i></div>
          <!-- <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> -->
        </el-upload>

        <div
          class="SelectCustomerBlock"
          style="position: absolute; left: 31px; bottom: 20px"
        >
          <div class="" style="display: flex" v-if="session.role_id == 1 || session.role_id == 3 || session.role_id == 4 || session.role_id == 5 || session.role_id == 6">
            <div class="SelectCustomers marginright1">
              选择客户<span style="color: red">*</span>:
            </div>
            <el-select
              v-model="customervalue"
              filterable
              placeholder="请选择客户"
              class="marginright1"
            >
              <el-option
                v-for="item in customers"
                :key="item.id"
                :label="item.username"
                :value="item.id"

              ></el-option>
            </el-select>
          </div>

          <div class="" style="display: flex">
            <div class="SelectCustomers marginright1">
              客户开发季<span style="color: red">*</span>:
            </div>
            <el-select
              v-model="DevelopmentSeasonvalue"
              filterable
              allow-create
              default-first-option
              placeholder="请选择客户开发季"
              class="marginright1"
            >
              <el-option
                v-for="item in DevelopmentSeason"
                :key="item"
                :label="item"
                :value="item"

              ></el-option>
            </el-select>
          </div>

          <div class="" style="display: flex">
            <div class="SelectCustomers marginright1">
              客户开发年份<span style="color: red">*</span>:
            </div>
            <el-select
              v-model="yearvalue"
              filterable
              placeholder="请选择客户开发年份"
              class="marginright1"
            >
              <el-option
                v-for="item in year"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </div>
        </div>
      </div>

      <div class="AllPattern">
        <div class="AllPatternTitles">
          <div class="AllPatternTitle">全部花型</div>
          <div class="AllPatternTitleDecoration"></div>
          <div :class="Arrowclass" class="hideBlueBorderbutton" @click="hideBlueBorder()">显示筛选</div>
        </div>
        <div class="BlueBorder" v-if="Arrow == true">
          <div>
            <div class="BigCategoryTitle">用途:</div>
            <!-- <div v-for="(p,index) in p" :key="p.id" class="BigCategoryContent">{{index}} --- {{p.id}} --- {{p.name}} --- {{p.age}}</div> -->
            <!-- <div v-for="(use) in use" :key="use.id" class="BigCategoryContent" @click="UpdateUse($event,use.id)">{{use.name}}</div> -->
            <!-- <el-radio :label="use.name" @click.native.stop="UpdateUse($event,use.id)">{{use.name}}</el-radio> -->
            <el-radio-group
              v-model="getListData.useradio"
              v-for="use in use"
              :key="use.id"
              class="BigCategoryContent"
              @change="UpdateUse($event, use.id)"
              @click.native='useradioclean($event, use.id)'
            >
              <el-radio :label="use.name">{{ use.name }}</el-radio>
            </el-radio-group>
          </div>

          <div>
            <div class="BigCategoryTitle">款式:</div>
            <div
              v-for="use in use"
              :key="use.id"
              class="ClothingStyles"
              :class="use.class"
            >
              <!-- <div v-for="(ClothingStyle) in ClothingStyle" :key="ClothingStyle.id" class="BigCategoryContent" :class='use.class'>{{ClothingStyle.name}}</div> -->
              <el-radio-group
                v-model="getListData.ClothingStyleradio"
                v-for="ClothingStyle in ClothingStyle"
                :key="ClothingStyle.id"
                class="BigCategoryContent"
                @click.native='confirmcleantime($event,"ClothingStyleradio")'
              >
                <el-radio :label="ClothingStyle.name">{{
                  ClothingStyle.name
                }}</el-radio>
              </el-radio-group>
            </div>
          </div>

          <div style="display: flex; align-items: center">
            <div class="BigCategoryTitle">幅宽(高对高):</div>
            <div style="display: flex; align-items: center; margin-left: 24px; color:#AFAFAF;">
              <input
                v-model="getListData.HightohighInputMin"
                placeholder=""
                class="BigCategoryInput"
                type="number"
                style="color:#606266;"
              />
              <div style="color: #b9b9b9; margin: 4px">——</div>
              <input
                v-model="getListData.HightohighInputMax"
                placeholder=""
                class="BigCategoryInput"
                type="number"
                style="color:#606266;"
              />
            </div>
          </div>

          <div style="display: flex; align-items: center" v-if="session.account_type != 2">
            <div class="BigCategoryTitle">幅宽(低对低):</div>
            <div style="display: flex; align-items: center; margin-left: 24px">
              <input
                v-model="getListData.LowtolowInputMin"
                placeholder=""
                class="BigCategoryInput"
                type="number"
                style="color:#606266;"
              />
              <div style="color: #b9b9b9; margin: 4px">——</div>
              <input
                v-model="getListData.LowtolowInputMax"
                placeholder=""
                class="BigCategoryInput"
                type="number"
                style="color:#606266;"
              />
            </div>
          </div>

          <div style="display: flex; align-items: center">
            <div class="BigCategoryTitle">花高:</div>
            <div style="display: flex; align-items: center; margin-left: 24px">
              <input
                v-model="getListData.FlowerHeightMin"
                placeholder=""
                class="BigCategoryInput"
                type="number"
                style="color:#606266;"
              />
              <div style="color: #b9b9b9; margin: 4px">——</div>
              <input
                v-model="getListData.FlowerHeightMax"
                placeholder=""
                class="BigCategoryInput"
                type="number"
                style="color:#606266;"
              />
            </div>
          </div>

          <div style="display: flex; align-items: center">
            <div class="BigCategoryTitle">克重:</div>
            <div style="display: flex; align-items: center; margin-left: 24px">
              <input
                v-model="getListData.WeightMin"
                placeholder=""
                class="BigCategoryInput"
                type="number"
                style="color:#606266;"
              />
              <div style="color: #b9b9b9; margin: 4px">——</div>
              <input
                v-model="getListData.WeightMax"
                placeholder=""
                class="BigCategoryInput"
                type="number"
                style="color:#606266;"
              />
            </div>
          </div>

          <div>
            <div class="BigCategoryTitle">弹性:</div>
            <!-- <div v-for="(p) in elastic" :key="p.id" class="BigCategoryContent">{{p.name}}</div> -->
            <el-radio-group
              v-model="getListData.elasticradio"
              v-for="p in elastic"
              :key="p.id"
              class="BigCategoryContent"
              @click.native='confirmcleantime($event,"elasticradio")'
            >
              <el-radio :label="p.name">{{ p.name }}</el-radio>
            </el-radio-group>
          </div>

          <div>
            <div class="BigCategoryTitle">机型:</div>
            <!-- <div v-for="(p) in Machinemodel" :key="p.id" class="BigCategoryContent">{{p.name}}</div> -->
            <el-radio-group
              v-model="getListData.Machinemodelradio"
              v-for="p in Machinemodel"
              :key="p.id"
              class="BigCategoryContent"
              @click.native='confirmcleantime($event,"Machinemodelradio")'
            >
              <el-radio :label="p.name">{{ p.name }}</el-radio>
            </el-radio-group>
          </div>

          <div>
            <div class="BigCategoryTitle">机台针数:</div>
            <!-- <div v-for="(p) in NumberOfStitches" :key="p.id" class="BigCategoryContent">{{p.name}}</div> -->
            <el-radio-group
              v-model="getListData.NumberOfStitchesradio"
              v-for="p in NumberOfStitches"
              :key="p.id"
              class="BigCategoryContent"
              @click.native='confirmcleantime($event,"NumberOfStitchesradio")'
            >
              <el-radio :label="p.name">{{ p.name }}</el-radio>
            </el-radio-group>
          </div>

          <div>
            <div class="BigCategoryTitle">功能:</div>
            <!-- <div v-for="(p) in Machinefunction" :key="p.id" class="BigCategoryContent">{{p.name}}</div> -->
            <el-radio-group
              v-model="getListData.Machinefunctionradio"
              v-for="p in Machinefunction"
              :key="p.id"
              class="BigCategoryContent"
              @click.native='confirmcleantime($event,"Machinefunctionradio")'
            >
              <el-radio :label="p.name">{{ p.name }}</el-radio>
            </el-radio-group>
          </div>

          <div>
            <div class="BigCategoryTitle">质感:</div>
            <!-- <div v-for="(p) in textures" :key="p.id" class="BigCategoryContent">{{p.name}}</div> -->
            <el-radio-group
              v-model="getListData.texturesradio"
              v-for="p in textures"
              :key="p.id"
              class="BigCategoryContent"
              @click.native='confirmcleantime($event,"texturesradio")'
            >
              <el-radio :label="p.name">{{ p.name }}</el-radio>
            </el-radio-group>
          </div>

          <div>
            <div class="BigCategoryTitle">结构:</div>
            <!-- <div v-for="(p) in structure" :key="p.id" class="BigCategoryContent">{{p.name}}</div> -->
            <el-radio-group
              v-model="getListData.structureradio"
              v-for="p in structure"
              :key="p.id"
              class="BigCategoryContent"
              @click.native='confirmcleantime($event,"structureradio")'
            >
              <el-radio :label="p.name">{{ p.name }}</el-radio>
            </el-radio-group>
          </div>

          <!--筛选条件-->
          <div>
            <div class="BigCategoryTitle">筛选条件:</div>
            <div
              style="width: 150px"
              v-for="(p, index) in ScreeningConditions"
              :key="p.id"
              class="BigCategoryContent"
              @change="UpdateScreeningConditions($event, p.id)"
            >
              <el-radio
                v-model="getListData.ScreeningConditionsradio"
                :label="p.name"
                @click.native='confirmcleantime($event,"ScreeningConditionsradio")'
              >
                {{ p.name }}
              </el-radio>
              <div style="width: 60px; display: inline-block" v-if="p.name != '库存条件'">
                <el-radio-group v-model="p.state" >
                  <el-radio
                    :data-index="index"
                    class="andor"
                    :label="'AND'"
                    @change="updateandoror()"
                    @click.native='andorconfirmcleantime($event,p.ListDataName, p.state)'
                    >且</el-radio
                  >
                  <el-radio
                    :data-index="index"
                    class="andor"
                    :label="'OR'"
                    @change="updateandoror()"
                    @click.native='andorconfirmcleantime($event,p.ListDataName, p.state)'
                    >或</el-radio
                  >
                </el-radio-group>
              </div>
            </div>
          </div>

          <div class="FilterCriteriaDetails">
            <div
              v-for="q in ScreeningConditions"
              :key="q.id"
              class="q"
              :class="q.class"
            >
              <el-checkbox-group
                v-model="FilterCriteriaDetailscheckbox"
                v-for="p in FilterCriteriaDetails"
                :key="p.id"
                class="BigCategoryContent"
              >
                <el-checkbox :label="p.name">{{ p.name }}</el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </div>
      </div>

      <div class="Exhibition">
        <div class="goods">
          <!-- <el-card
            :body-style="{
              width: '330px',
              height: '330px',
              padding: '0px',
              margin: '0px 0px 0px 0px',
            }"
            shadow="hover"
          > -->
            <!-- v-for="item in tableData" -->
          <el-card
            v-for="item in tableData"
            :key="item.id"
            :body-style="{
              flex: '20%',
              padding: '5px',
            }"
            shadow="hover"
          >
            <div class="imagebox">
            <img
              :src="baseurl + item.picture_thumb"
              class="image"
              @click="toInfo(item.pid,item.similarity_value)"
            />
            </div>
            <div
              style="
                width: 330px;
                height: 140px;
                padding: 0px;
                position: relative;
              "
            >
              <div v-if="session.account_type != 1">
                <span style="position: absolute; left: 12px; top: 7px">{{ item.no }}</span>
              </div>
              <div v-if="session.account_type != 2">
                <span v-if="item.series !== undefined && item.series !== null && item.series !== ''" style="position: absolute; left: 12px; top: 7px">{{ item.no + "(" + item.series + ")" }}</span>
                <span v-else style="position: absolute; left: 12px; top: 7px">{{ item.no }}</span>
              </div>
              <span style="position: absolute; left: 12px; top: 34px"
                >幅宽:{{ item.widthheight }}</span
              >
              <span style="position: absolute; left: 115px; top: 33px;"
                >克重:{{ item.weight }}</span
              >
              <span style="position: absolute; left: 12px; top: 60px; width: 250px; word-break: break-all;"
                >成分:{{ item.component }}</span
              >
              <span style="position: absolute; left: 12px; top: 105px; width: 250px; word-break: break-all;"
                >相似值:{{ item.similarity_value }}</span
              >
              <!-- left: 155px; top: 33px; width: 125px; -->
              <div
                class="Vector"
                @click="addCart(item.pid, item.no, item.series, item.picture)"
              >
                <div
                  style="
                    width: 36px;
                    height: 36px;
                    background: rgba(236, 236, 236, 0.4);
                    border-radius: 18px;
                    position: absolute;
                  "
                ></div>
                <img
                  style="position: absolute; top: 7px; left: 7px"
                  src="@/assets/Vector/Vector.png"
                />
              </div>
            </div>
          </el-card>
        </div>
        <!-- <el-row :gutter="60" v-for="item in tableData" :key="item.id">
          <el-col :span="6" v-for="p in 4" :key="p">
            <el-card
              :body-style="{
                width: '330px',
                height: '330px',
                padding: '0px',
                margin: '0px 0px 0px 0px',
              }"
              shadow="hover"
            >
              <img
                :src="baseurl + '/' + item.picture"
                class="image"
                @click="toInfo(item.pid)"
              />
              <div
                style="
                  width: 330px;
                  height: 90px;
                  padding: 0px;
                  position: relative;
                "
              >
                <span style="position: absolute; left: 12px; top: 7px"
                  >花型编号(产品系列):{{
                    item.no + "(" + item.series + ")"
                  }}</span
                >
                <span style="position: absolute; left: 12px; top: 34px"
                  >幅宽:{{ item.widthheight }}</span
                >
                <span style="position: absolute; left: 12px; top: 64px"
                  >克重:{{ item.weight }}</span
                >
                <span style="position: absolute; left: 165px; top: 35px"
                  >成分:{{ item.component }}</span
                >
                <div
                  class="Vector"
                  @click="addCart(item.pid, item.no, item.series, item.picture)"
                >
                  <div
                    style="
                      width: 36px;
                      height: 36px;
                      background: rgba(236, 236, 236, 0.4);
                      border-radius: 18px;
                      position: absolute;
                    "
                  ></div>
                  <img
                    style="position: absolute; top: 7px; left: 7px"
                    src="@/assets/Vector/Vector.png"
                  />
                </div>
              </div>
            </el-card>
          </el-col> </el-row
        ><br /> -->
      </div>

      <pagination
        v-show="totalPage > 0"
        :total="totalPage"
        :page.sync="getListData.pageNo"
        :limit.sync="getListData.pageSize"
        @pagination="getList"
        style="position: absolute; left: 483px; bottom: 11px; padding: 0px; background: #F3F3F300;"
        layout="total, prev, pager, next, jumper"
      ></pagination>

      <div @click="dialogVisible = true">
        <el-badge
          :value="shopNum"
          style="position: absolute; right: 159px; bottom: 34px; z-index: 1"
        ></el-badge>
        <img
          style="
            width: 36.7px;
            height: 36.4px;
            position: absolute;
            right: 166px;
            bottom: 20px;
          "
          src="@/assets/Vector/VectorBlack.png"
        />
        <div class="Orderlist">订单列表</div>
      </div>

      <el-dialog
        class="dialogTitle"
        title="购物车订单"
        :visible.sync="dialogVisible"
        width="727px"
      >
        <!-- <div
          style="
            width: 583px;
            height: 501px;
            background-color: #f3f3f3;
            overflow-y: scroll;
            overflow-x: hidden;
          "
        >
          <div class="Orderblock" v-for="p in shopCart" :key="p.id">
            <div
              style="
                width: 64px;
                height: 64px;
                position: absolute;
                left: 7px;
                top: 7px;
              "
            >
              <img
                :src="baseurl + '/' + p.img"
                alt=""
                style="width: 100%; height: 100%"
              />
            </div>
            <div class="OrderblockTitle">{{ p.title }}</div>
            <el-input-number size="mini" v-model="p.num"></el-input-number>
            <div class="Orderblockdelete" @click="Orderblockdelete(p.id)">
              删除
            </div>
          </div>
        </div> -->
        <el-table :data="shopCart" :show-header="false">

          <el-table-column width="120" align="center">
            <template slot-scope="{ row }">
              <el-image
                style="width: 98px; height: 60px"
                :src="baseurl + '/' + row.img"
              ></el-image>
            </template>
          </el-table-column>

          <el-table-column prop="title" width="150" align="left">
          </el-table-column>

          <el-table-column width="150" align="center" show-header="false">
            <template slot-scope="{ row }">
              <el-input-number
                :min="1"
                size="mini"
                v-model="row.num"
                @change="handleNum(row.id, row.num)"
              ></el-input-number>
            </template>
          </el-table-column>

          <el-table-column width="150" align="center">
            <template slot-scope="{ row }">
              <el-input
                placeholder="请输入颜色"
                v-model="row.color"
                clearable
              >
              </el-input>
            </template>
          </el-table-column>

          <el-table-column align="center" show-header="false">
            <template slot-scope="{ row }">
              <el-popconfirm
                confirm-button-text="确认"
                cancel-button-text="取消"
                title="确认删除当前花型？"
                @confirm="Orderblockdelete(row.id, row.uuid)"
              >
                <el-button type="danger" slot="reference">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>

        </el-table>
        <div>
          <el-form ref="order" :inline="true" :model="order">
            <div class="dialogflex">
              <el-form-item
                label="要求交期"
                prop="delivery_date"
                :rules="[{ required: true, message: '要求交期不能为空' }]"
              >
                <!-- <div class="dialogtypeface">要求交期</div> -->
                <el-date-picker
                  v-model="order.delivery_date"
                  type="date"
                  placeholder="选择日期"
                ></el-date-picker>
              </el-form-item>
            </div>

            <div
              class="OrderSelectionCustomer dialogflex"
              v-if="session.role_id == 1 || session.role_id == 3 || session.role_id == 4 || session.role_id == 5 || session.role_id == 6"
            >
              <!-- <div class="dialogtypeface">选择客户</div> -->
              <el-form-item
                label="选择客户"
                prop="cstmr_name"
                :rules="[{ required: true, message: '客户不能为空' }]"
              >
                <el-select
                  v-model="order.cstmr_name"
                  filterable
                  placeholder="请选择"
                  @change="changeCustomer"
                >
                  <el-option
                    v-for="item in customers"
                    :key="item.id"
                    :label="item.username"
                    :value="item"
                  ></el-option>
                </el-select>
                <!-- <el-select
                  v-model="order.cstmr_name"
                  filterable
                  remote
                  reserve-keyword
                  placeholder="请输入客户"
                  :remote-method="getCustomer"
                  @change="changeCustomer"

                  :loading="loading1"
                  value-key="id"
                >
                  <el-option
                    v-for="item in customers"
                    :key="item.id"
                    :label="item.username"
                    :value="item"
                  >
                  </el-option>
                </el-select> -->
              </el-form-item>
            </div>
          </el-form>
          <!-- <div class="OrderSelectionCustomer dialogflex">
            <div class="dialogtypeface" style="margin: 0px 20px 0 0">
              选择业务员
            </div>
            <el-select v-model="customervalue" filterable placeholder="请选择">
              <el-option
                v-for="item in customer"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div> -->
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="OrderIsBuy">确认下单</el-button>
          <el-button @click="dialogVisible = false">取 消</el-button>
        </span>
      </el-dialog>
    </div>
    <footer style="width: 100%; height: 15px"></footer>
  </main>
</template>


<script>
import { Message } from "element-ui";
import { composedPath  } from "@/app/utils/path";
import { cartList, cartDelete, cartNum, cartAdd } from "@/app/api/shopcat";
import { patternSearch, imageSearch } from "@/app/api/pattern";
import { searchCustomer } from "@/app/api/system";
import { orderAdd,OrderIsBuy } from "@/app/api/order";
import Pagination from "@/app/components/Pagination";
import { mapState } from "vuex";
import { getProperty } from "@/app/api/property";
import { getConfigJSON,getPwdJSON } from "@/app/api/config";
import CropperImage from "@/app/views/search/CropperImage";
import { uploadImg } from "./CropperImage.vue";
import store from "@/framework/store";

export default {
  components: {
    Pagination,
    CropperImage,
  },
  name: "Search",
  data() {
    return {
      post_url: img_post_url,
      headerObj: {
        'tp-uuid': this.$store.getters.session.uuid,
        'tp-Token': this.$store.getters.session.token,
        'tp-timestamp': new Date().getTime(),
        'tp-source': '1'
      },
      cleantime: true,
      andorcleantime: true,

      ClothingStyleradiocleannum: 999,
      elasticradiocleannum: 999,
      Machinemodelradiocleannum: 999,
      NumberOfStitchesradiocleannum: 999,
      Machinefunctionradiocleannum: 999,
      texturesradiocleannum: 999,
      structureradiocleannum: 999,

      materialstatecleannum: null,
      overlockstatecleannum: null,
      Elementdescriptionstatecleannum: null,
      Patternstylestatecleannum: null,
      Inventorystatecleannum: null,

      istate: '',

      Arrowclass: 'top-arrow',
      Arrow: true,
      Mainheight: '',
      formValidate: {
        mainImage: '',
      },
      ruleValidate: {
        mainImage: [
          {required: true, message: '请上传封面', trigger: 'blur'}
        ],
      },
      fileLista: [
      ],
      //裁切图片参数
      cropperModel:false,
      cropperImg:'',

      cropperName:'',
      imgName: '',
      imgVisible: false,


      customers: [],
      loading1: false,
      order: {
        delivery_date: "",
        cstmr_name: "",
      },
      loading: false,
      tableData: [],
      totalPage: 1,
      listLoading: true,
      getListData: {
        pageNo: 1,
        pageSize: 20,
        useradio: "",
        // ClothingStyle: [],
        ClothingStyleradio: "",
        HightohighInputMin: "",
        HightohighInputMax: "",
        LowtolowInputMin: "",
        LowtolowInputMax: "",
        FlowerHeightMin: "",
        FlowerHeightMax: "",
        WeightMin: "",
        WeightMax: "",
        elasticradio: "",
        Machinemodelradio: "",
        NumberOfStitchesradio: "",
        Machinefunctionradio: "",
        texturesradio: "",
        structureradio: "",
        ScreeningConditionsradio: "",
        // FilterCriteriaDetailscheckbox: [],

        materialstateClassification: [],
        overlockstateClassification: [],
        ElementdescriptionstateClassification: [],
        PatternstylestateClassification: [],
        InventorystateClassification: [],

        materialstate: null,
        overlockstate: null,
        Elementdescriptionstate: null,
        Patternstylestate: null,
        Inventorystate: null,
        yearvalue: "",
        DevelopmentSeasonvalue: "",
        customervalue:"",
        keyword: "",
        searchPicture: "",
        hasFilter: false,
        similarity_value:'',
      },
      FilterCriteriaDetailscheckbox: [],

      materialDictionaries: "",
      overlockDictionaries: "",
      ElementdescriptionDictionaries: "",
      PatternstyleDictionaries: "",
      InventoryDictionaries: "",

      uid: 0,
      baseurl: api_url,
      // 购物车
      shopCart: [],
      shopNum: 0,
      // 搜索
      SearchButtonInput: "",
      // 选择客户
      customer: [],
      customervalue: "",

      DevelopmentSeason: [],
      DevelopmentSeasonvalue: "",

      year: [],
      yearvalue: "",
      //
      // activeName: 'second',
      //
      PictureSearchClass: "",

      //多条件筛选功能
      use: [
        // { id: 1, name: "内衣", class: "useNone" }, // { id: 2, name: "外衣", class: "useNone" }, // { id: 3, name: "童装", class: "useNone" }, // { id: 4, name: "运动", class: "useNone" },
      ],
      useradio: "",
      ClothingStyle: [],
      elastic: [
        // { id: 1, name: "有弹" }, // { id: 2, name: "无弹" },
      ],
      Machinemodel: [
        // { id: 1, name: "ML" }, // { id: 2, name: "1/5" }, // { id: 3, name: "H10" }, // { id: 4, name: "贾卡压纱" }, // { id: 5, name: "贾卡平板" }, // { id: 6, name: "其他" },
      ],
      NumberOfStitches: [
        // { id: 1, name: "24E" }, // { id: 2, name: "28E" }, // { id: 3, name: "12E" }, // { id: 4, name: "18E" }
      ],
      Machinefunction: [
        // { id: 1, name: "易裁" }, // { id: 2, name: "压膜" }, // { id: 3, name: "边部强弹" }, // { id: 4, name: "超柔" }, // { id: 5, name: "抗菌" }, // { id: 6, name: "褶皱气泡" }, // { id: 7, name: "可持续" },
      ],
      textures: [
        // { id: 1, name: "薄透" }, // { id: 2, name: "棉感" }, // { id: 3, name: "刺绣手编" }, // { id: 4, name: "其它" },
      ],
      structure: [
        // { id: 1, name: "满排" }, // { id: 2, name: "两边排列中间空" },
      ],
      ScreeningConditions: [
        { id: 1, class: "useNone", state: null, name: "材料", ListDataName: 'materialstate' },
        { id: 2, class: "useNone", state: null, name: "波边", ListDataName: 'overlockstate' },
        { id: 3, class: "useNone", state: null, name: "元素描述", ListDataName: 'Elementdescriptionstate' },
        { id: 4, class: "useNone", state: null, name: "风格", ListDataName: 'Patternstylestate' },
        { id: 5, class: "useNone", state: null, name: "库存条件", ListDataName: 'Inventorystate' },
      ],
      FilterCriteriaDetails: [],
      material: [
        // { id: 1, name: "单色" }, // { id: 2, name: "双色" }, // { id: 3, name: "多色" }, // { id: 4, name: "金属线" }, // { id: 5, name: "毛感纱线" }, // { id: 6, name: "可持续" },
      ],
      overlock: [
        // { id: 1, name: "单色1" }, // { id: 2, name: "双色2" }, // { id: 3, name: "多色3" }, // { id: 4, name: "金属线4" }, // { id: 5, name: "毛感纱线5" }, // { id: 6, name: "可持续6" },
      ],
      Elementdescription: [
        // { id: 1, name: "单色2" }, // { id: 2, name: "双色1" }, // { id: 3, name: "多色1" }, // { id: 4, name: "金属线1" }, // { id: 5, name: "毛感纱线1" }, // { id: 6, name: "可持续1" },
      ],
      Patternstyle: [
        // { id: 1, name: "单色3" }, // { id: 2, name: "双色3" }, // { id: 3, name: "多色1" }, // { id: 4, name: "金属线3" }, // { id: 5, name: "毛感纱线3" }, // { id: 6, name: "可持续3" },
      ],
      inventory: [
        // { id: 1, name: "单色3" }, // { id: 2, name: "双色3" }, // { id: 3, name: "多色1" }, // { id: 4, name: "金属线3" }, // { id: 5, name: "毛感纱线3" }, // { id: 6, name: "可持续3" },
      ],
      currentPage: 1,
      dialogVisible: false,
      Orderblocknum: 0,
      value2: "",
      Underwear: [
        // {id:1,name:"睡衣连体"}, // {id:2,name:"小裤"}, // {id:3,name:"塑身压膜"}, // {id:4,name:"运动内衣"}, // {id:5,name:"文胸"}, // {id:6,name:"装饰配料"},
      ],
      coat: [
        // {id:1,name:"辅料"}, // {id:2,name:"连衣裙"}, // {id:3,name:"上衣"}, // {id:4,name:"打底"}, // {id:5,name:"配料"},
      ],
      patterns: {},
      GetpatternNum: [],
      isTextSearch: true,
      searchPicture: ''
    };
  },
  // updated() {
    // this.countMainheight();
  // },
  computed: {
    ...mapState("user", ["session", "account"]),
  },
  created() {
    if (this.session.role_id == 2) {
      this.customervalue = this.session.id;
      this.getListData.customervalue = this.session.id;
    }

    this.Getpattern();
    this.uid = this.session.id;
    this.getList();
    this.getCartList();
    this.getConfig();
    this.getCustomer();
    this.getPwd();
  },
  // mounted() {
    //一进来就算展示的高度，
    // this.countMainheight();
  // },
  methods: {
    countMainheight () {
      let Exhibition = document.getElementsByClassName('Exhibition')[0];
      // console.log(Exhibition.offsetHeight);
      // console.log(`height: ${760 + Exhibition.offsetHeight}px;`);
      this.Mainheight = `height: ${760 + Exhibition.offsetHeight}px;`;

      if (this.PictureSearchClass == "PictureSearchflex" && this.Arrow == false) {
        this.Mainheight = `height: ${440 + Exhibition.offsetHeight}px;`;
      }else if (this.PictureSearchClass == "PictureSearchflex") {
        this.Mainheight = `height: ${940 + Exhibition.offsetHeight}px;`;
      }
    },

    imgSaveToUrl(name){  // 用event或file
      // return
      // this.localFile=event.raw  // 或者 this.localFile=file.raw

      // 转换操作可以不放到这个函数里面，
      // 因为这个函数会被多次触发，上传时触发，上传成功也触发
      // let reader = new FileReader()
      // reader.readAsDataURL(this.localFile);// 这里也可以直接写参数event.raw

      // 转换成功后的操作，reader.result即为转换后的DataURL ，
      // 它不需要自己定义，你可以console.log(reader.result)看一下
      // reader.onload=()=>{
        // console.log(reader.result)
        // let src = reader.result
        // console.log('a');
        this.cropperName = name;
        this.cropperModel = true
        // this.cropperImg = src
      // }

      /* 另外一种本地预览方法 */
      // let URL = window.URL || window.webkitURL;
      // this.model.icon = URL.createObjectURL(file.raw);
      // 转换后的地址为 blob:http://xxx/7bf54338-74bb-47b9-9a7f-7a7093c716b5
    },

    //图片上传成功后
    handleUploadSuccess (data){
      if (typeof(data.data) == "string") {
        data.data = JSON.parse(data.data);
      }

      console.log(data.data.path);
      this.searchPicture = data.data.path;
      this.getListData.searchPicture = data.data.path;
      this.fileLista = [];
      this.fileLista.push({url:this.baseurl + data.data.path});
      // console.log(this.fileLista[0]);
      // console.log(this.fileLista);
      this.cropperModel = false;
      let PictureSearch = document.getElementsByClassName('PictureSearch')[0];
      // console.log(PictureSearch.firstElementChild.firstElementChild);
      // PictureSearch.firstElementChild.firstElementChild.style.display = 'none';
      PictureSearch.firstElementChild.lastElementChild.style.display = 'block';

    },
    del(file, fileList){
      // console.log(file, fileList);
      this.fileLista = fileList;
      this.searchPicture = '';
      let PictureSearch = document.getElementsByClassName('PictureSearch')[0];
      PictureSearch.firstElementChild.lastElementChild.style.display = 'none';
      // let PictureSearch = document.getElementsByClassName('PictureSearch')[0];
      // if (PictureSearch.firstElementChild.lastElementChild.style.display == 'block') {
        // PictureSearch.firstElementChild.firstElementChild.style.display = 'none';
      // }else{
        // PictureSearch.firstElementChild.firstElementChild.style.display = 'block';
      // }

    },




    changeCustomer(customer) {
      this.order.cstmr_num = customer.usercode;
      this.order.cstmr_name = customer.username;
      this.order.cstmr_id = customer.id;

    },
    // getCustomer(query) {
    //   if (query !== "") {
    //     this.loading1 = true;
    //     searchCustomer({ username: query })
    //       .then((res) => {
    //         this.customers = res.data;
    //         this.loading1 = false;
    //       })
    //       .catch((error) => {
    //         console.log("getCustomer error", error);
    //         this.loading1 = false;
    //       });
    //   }
    // },

    getCustomer() {
        searchCustomer()
          .then((res) => {
            this.customers = res.data;

            for (let i in this.customers) {
              if (this.customers[i].usercode == "common_customer") {
                this.customervalue = this.customers[i].id;
              }
            }
          })
          .catch((error) => {
            console.log("getCustomer error", error);
          });

    },
    getConfig() {
      getConfigJSON({})
        .then((res) => {
          let data = res.data;
          this.DevelopmentSeason = data.search_season;
          this.year = data.search_year;
        })
        .catch((error) => {
          console.log("studentSourceList error", error);
        });
    },
    getPwd() {
      getPwdJSON({})
        .then((res) => {
          // console.log(res.status);
          // let data = res.data;
          // this.DevelopmentSeason = data.search_season;
          // this.year = data.search_year;
        })
        .catch((error) => {
          console.log("studentSourceList error", error);
        });
    },
    ExpandPictureSearch() {
      let Mainheight = document.getElementsByClassName("divMain")[0];
      // let mheight = Number(this.Mainheight.replace("height: ", "").replace("px;", ""));
      if (this.PictureSearchClass !== "PictureSearchflex") {
        this.PictureSearchClass = "PictureSearchflex";
        // console.log(this.PictureSearchClass);
        // console.log(document.getElementsByClassName('divMain')[0]);
        // Mainheight.style.height = "1610px";
        // Mainheight.style.height = "2680px";

        Mainheight.style.height = `${Mainheight.offsetHeight + 180}px`;
        // console.log(this.Mainheight);
        // console.log(Mainheight.offsetHeight);
        this.isTextSearch = false;
        this.getListData.keyword = '';
      } else {
        this.isTextSearch = true;
        this.PictureSearchClass = "PictureSearchnone";
        // Mainheight.style.height = "1445px";
        // Mainheight.style.height = "2515px";
        Mainheight.style.height = `${Mainheight.offsetHeight - 180}px`;
        // console.log(this.Mainheight);
        // console.log(Mainheight.offsetHeight);
      }
    },

    handleClick(tab, event) {
      console.log(tab, event);
    },


    //用途专用 - 再次点击取消
    useradioclean(event, id) {
      for (let i = 0; i < this.use.length; i++) {
        if ( this.use[i].class == "useBlock") {
          if (i+1 == id) {
            setTimeout(() => {
              this.getListData.useradio = "";
              this.getListData.ClothingStyleradio = "";
            }, 50);
            this.use[i].class = "useNone"
          }
        }
      }
    },
    //cleandata节流
    confirmcleantime(event,name){
      if (this.cleantime == true) {
        this.cleantime = false
        setTimeout(() => {
          this.cleantime = true
        }, 50);
        this.cleandata(event,name);
      }else if(this.cleantime == false){
        return;
      }
    },
    //cleandata 再次点击清除
    cleandata(event,name){
      // console.log(event)
      let arr = composedPath(event) || []
      // console.log(arr[3].children[0].children)
      for (let i = 0; i < arr[3].children.length; i++) {
        setTimeout(() => {
          // console.log(arr[3].children[i].children)
          // console.log(arr[3].children[i].children[0].ariaChecked);
          if(arr[3].children[i].children.length > 0){
            if(arr[3].children[i].children[0].ariaChecked){
              // console.log(i);
              if (i == this[`${name}cleannum`]) {
                  this.getListData[name] = "";
                  this[`${name}cleannum`] = 999;
                  return;
                }else{
                  this[`${name}cleannum`] = i;
                  return;
                }
            }
           
          }
        }, 50);
      }
    },



    //cleandata 筛选专用-节流
    andorconfirmcleantime(event,name, state){
      if (this.andorcleantime == true) {
        this.andorcleantime = false
        setTimeout(() => {
          this.andorcleantime = true
        }, 100);
        this.andorcleandata(event,name, state);
      }else if(this.andorcleantime == false){
        return;
      }
    },
    //cleandata 筛选专用-再次点击清除
    andorcleandata(event, name, state){
      let that = this
      let index = event.currentTarget.dataset.index

      setTimeout(() => {
        let current_state = that.ScreeningConditions[index].state;

        if(state == current_state) {
          //清除单选
          that.ScreeningConditions[index].state = "";
          //清除下属条件
          console.log(name);
          let sname = name.replace("state", "");
          console.log(sname);
          let a,aa=[];

          for (let index = 0; index < this.FilterCriteriaDetailscheckbox.length; index++) {
            // console.log(
              // this[`${sname}Dictionaries`][
                // this[`${sname}Dictionaries`].indexOf(
                  // this.FilterCriteriaDetailscheckbox[index]
                // )
              // ]
            // );
            a = this[`${sname}Dictionaries`][
                          this[`${sname}Dictionaries`].indexOf(
                            this.FilterCriteriaDetailscheckbox[index]
                          )
                        ];

            if (a != undefined) {
              aa.push(a);
            }
          }

          // console.log(aa);
          // console.log(this.FilterCriteriaDetailscheckbox);

          let aaa = this.FilterCriteriaDetailscheckbox.toString();
          // console.log(aaa);

          for (let i = 0; i < aa.length; i++) {
            // console.log(aa[i]);
            aaa = aaa.replace(aa[i], "");
          }

          aaa = aaa.replace(/,,/g, "");
          // console.log(aaa);

          let aaaa = aaa.split(',');
          // console.log(aaaa);

          this.FilterCriteriaDetailscheckbox = aaaa;
          console.log(this.FilterCriteriaDetailscheckbox);
        }

      }, 50);
    },

    UpdateUse(event, id) {
      for (let index = 0; index < this.use.length; index++) {
        this.use[index].class = "useNone";
      }
      this.use[id - 1].class = "useBlock";

      if (id == 1) {
        this.ClothingStyle = this.Underwear;
      } else if (id == 2) {
        this.ClothingStyle = this.coat;
      } else if (id == 3) {
        this.ClothingStyle = [{ id: 1, name: "无" }];
      } else if (id == 4) {
        this.ClothingStyle = [{ id: 1, name: "无" }];
      }else if (id == 5) {
        this.ClothingStyle = [{ id: 1, name: "无" }];
      }
    },
    UpdateScreeningConditions(event, id) {
      for (let index = 0; index < this.ScreeningConditions.length; index++) {
        this.ScreeningConditions[index].class = "useNone";
      }
      this.ScreeningConditions[id - 1].class = "useBlock";

      if (id == 1) {
        this.FilterCriteriaDetails = this.material;
      } else if (id == 2) {
        this.FilterCriteriaDetails = this.overlock;
      } else if (id == 3) {
        this.FilterCriteriaDetails = this.Elementdescription;
      } else if (id == 4) {
        this.FilterCriteriaDetails = this.Patternstyle;
      }else if (id == 5) {
        this.FilterCriteriaDetails = this.inventory;
      }
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    // 花型列表
    getList() {
      if (this.isTextSearch) {
        patternSearch(this.getListData)
          .then((res) => {
            this.tableData = res.data.items;
            this.totalPage = res.data.total;

            // this.getListData.materialstateClassification = []
            // this.getListData.overlockstateClassification = []
            // this.getListData.ElementdescriptionstateClassification = []
            // this.getListData.PatternstylestateClassification = []
            this.listLoading = false;
            setTimeout(() => {
              this.countMainheight();
            }, 100);
          })
          .catch((error) => {
            console.log("studentSourceList error", error);
          });
      } else {
        this.getListData.keyword = ""

        imageSearch(this.getListData)
          .then((res) => {
            this.tableData = res.data.items;
            this.totalPage = res.data.total;

            // this.getListData.materialstateClassification = []
            // this.getListData.overlockstateClassification = []
            // this.getListData.ElementdescriptionstateClassification = []
            // this.getListData.PatternstylestateClassification = []
            this.listLoading = false;
            setTimeout(() => {
              this.countMainheight();
            }, 100);

          })
          .catch((error) => {
            console.log("image search error", error);
          });
      }
    },
    // 购物车列表
    getCartList() {
      cartList({ uid: this.uid })
        .then((res) => {
          this.shopCart = res.data;
          this.shopNum = this.shopCart.length;
        })
        .catch((error) => {
          console.log("cartList error", error);
        });
    },
    // 购物车删除
    Orderblockdelete(pid, uuid) {
      let index = 0;

      for (let i = 0; i < this.shopCart.length; i++) {
        if (this.shopCart[i].uuid == uuid) {
          index = i;
        }
      }

      cartDelete({ uid: this.uid, pid, index: index })
        .then((res) => {
          Message({
            message: "删除成功",
            type: "success",
            duration: 2 * 1000,
          });
          this.getCartList();
        })
        .catch((error) => {
          console.log("cartList error", error);
        });
    },
    // 购物车商品数量
    handleNum(pid, num) {
      cartNum({ uid: this.uid, pid, num })
        .then((res) => {})
        .catch((error) => {
          console.log("cartList error", error);
        });
    },
    // 购物车添加
    addCart(pid, no, series, picture) {
      this.$confirm("确认加入购物车?", "确认", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let title = '';
          // console.log(this.session.account_type);
          if (this.session.account_type == 1) {
            title = `${no}`;
          }else if (undefined == series) {
            title = `${no}`;
          } else{
            title = `${no}(${series})`;
          }

          let info = { id: pid, title, img: picture };
          info = JSON.stringify(info);
          cartAdd({ uid: this.uid, pid, num: 1, info })
            .then((res) => {
              Message({
                message: "添加成功",
                type: "success",
                duration: 2 * 1000,
              });
              this.getCartList();
            })
            .catch((error) => {
              console.log("cartList error", error);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    toInfo(pid,similarity_value) {
      console.log(pid);
      this.$router.replace({ path: `/search/flowerInfo/${pid}/1/${similarity_value}` });
    },

    OrderIsBuy(){
       if (this.shopCart.length <= 0) {
        Message({
          message: "购物车为空!",
          type: "error",
          duration: 2 * 1000,
        });
        return;
      }

      let pids = [];
      this.shopCart.forEach((item) => {
          pids.push(item.id);
      });

      let aid = ""
      if(this.session.role_id == 2 || this.session.role_id == 6 ){
        aid = "0"
      }else{
        aid = this.order.cstmr_id
      }

      OrderIsBuy({account_id:aid,pids:pids}).then((res) =>{
        if(res.data.length <= 0){
          this.placeOrder()
        }else{
          let flowerNo = "";
          res.data.forEach(v => {
              if(flowerNo == ""){
                flowerNo += v
              }else{
                flowerNo += ","+v
              }
          });
          this.$confirm("该客户无这些花型编号的权限("+flowerNo+"),请确认后下单", "确认", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
             this.placeOrder();
          }) .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
        }
      })




    },
    placeOrder() {
      if (this.shopCart.length <= 0) {
        Message({
          message: "购物车为空!",
          type: "error",
          duration: 2 * 1000,
        });
        return;
      }
      this.$refs["order"].validate((valid) => {
        if (valid) {
          this.order.goods = [];
          this.shopCart.forEach((item) => {
            this.order.goods.push({ color: item.color, pid: item.id, num: item.num });
          });

          orderAdd(this.order)
            .then((res) => {
              Message({
                message: "下单成功!",
                type: "success",
                duration: 2 * 1000,
              });
              this.dialogVisible = false;
              this.getCartList();
            })
            .catch((error) => {
              console.log("cartList error", error);
            });
          return;
        } else {
          return false;
        }
      });
    },
    searchbutton() {
      console.log("isTextSearch:" + this.isTextSearch);
      console.log("customervalue:", this.customervalue)

      this.FilterCriteriaDetailscheckboxClassification();
      if (this.customervalue == "") {
        Message.error("请选择客户!");
        return false;
      }
      if (this.DevelopmentSeasonvalue == "") {
        Message.error("请选择开发季!");
        return false;
      }
      if (this.yearvalue == "") {
        Message.error("请选择年份!");
        return false;
      }

      this.getListData.pageNo = 1;
      this.getListData.customervalue = this.customervalue;
      this.getListData.DevelopmentSeasonvalue = this.DevelopmentSeasonvalue;
      this.getListData.yearvalue = this.yearvalue;

      if (this.isTextSearch) {
        this.getList();
      } else {
        if (this.searchPicture == undefined || this.searchPicture == '') {
          Message.error("请上传图片!");
          return;
        }

        this.getList();

        /*
        console.log("image search");

        imageSearch({
          'customervalue': this.customervalue,
          'yearvalue': this.yearvalue,
          'DevelopmentSeasonvalue': this.DevelopmentSeasonvalue,
          'searchPicture': this.searchPicture,
          'page': this.getListData.pageNo
        })
          .then((res) => {
            this.tableData = res.data.items;
            this.totalPage = res.data.total;

            this.getListData.materialstateClassification = []
            this.getListData.overlockstateClassification = []
            this.getListData.ElementdescriptionstateClassification = []
            this.getListData.PatternstylestateClassification = []
            this.listLoading = false;
            setTimeout(() => {
              this.countMainheight();
            }, 100);
          })
          .catch((error) => {
            console.log("image search error", error);
          });

         */
      }

    },
    // onRadioChange(e) {
     // 当点击已经选中的把 activeModel 置空，就是取消选中，并返回
      // if (this.getListData.useradio === e) {
        // this.getListData.useradio = ''
        // return
      // }
     // 不是选中，选中当前点击 Radio
      // this.getListData.useradio = e
     // 选中操作
    // },
    Becomeobject(value, cla) {
      let array = [];
      let obj = {};
      // for (let index = 0; index < this.material.length; index++) {
      // obj = Object.assign({},obj,{id:index},{name:this.material[index]})
      // console.log(obj);
      // }
      for (let index = 0; index < value.length; index++) {
        array.push(
          (obj = Object.assign(
            {},
            obj,
            { id: index + 1 },
            { name: value[index] },
            { class: cla }
          ))
        );
      }
      // console.log(obj);
      // console.log(array);
      return array;
    },
    Getpattern() {
      getProperty().then((res) => {
        // res.data.forEach((item) => {
        // let field = {}
        // field[item.key] = item.value.options
        // this.patterns = Object.assign({}, this.patterns, field);
        // });
        // console.log(this.patterns);
        let num = this.GetpatternNum;
        for (let index = 0; index < res.data.length; index++) {
          num.push(res.data[index].key_name);
        }
        this.material = this.Becomeobject(
          res.data[num.indexOf("材料")].value.options
        );
        this.elastic = this.Becomeobject(
          res.data[num.indexOf("弹性")].value.options
        );
        this.use = this.Becomeobject(
          res.data[num.indexOf("用途")].value.options,
          "useNone"
        );
        this.Underwear = this.Becomeobject(
          res.data[num.indexOf("款式")].value.options[0]
        );
        this.coat = this.Becomeobject(
          res.data[num.indexOf("款式")].value.options[1]
        );
        this.Patternstyle = this.Becomeobject(
          res.data[num.indexOf("风格")].value.options
        );
        this.inventory = this.Becomeobject(
          res.data[num.indexOf("库存条件")].value.options
        );
        this.Elementdescription = this.Becomeobject(
          res.data[num.indexOf("元素描述")].value.options
        );
        this.Machinefunction = this.Becomeobject(
          res.data[num.indexOf("功能")].value.options
        );
        this.overlock = this.Becomeobject(
          res.data[num.indexOf("波边")].value.options
        );
        this.Machinemodel = this.Becomeobject(
          res.data[num.indexOf("机型")].value.options
        );
        this.NumberOfStitches = this.Becomeobject(
          res.data[num.indexOf("机台针数")].value.options
        );
        this.textures = this.Becomeobject(
          res.data[num.indexOf("质感")].value.options
        );
        this.structure = this.Becomeobject(
          res.data[num.indexOf("结构")].value.options
        );
        // this.xxxxxxxxx          = this.Becomeobject(res.data[num.indexOf('系列')].value.options);
        // console.log(this.material);
        this.materialDictionaries = res.data[num.indexOf("材料")].value.options;
        this.overlockDictionaries = res.data[num.indexOf("波边")].value.options;
        this.ElementdescriptionDictionaries =
          res.data[num.indexOf("元素描述")].value.options;
        this.PatternstyleDictionaries =
          res.data[num.indexOf("风格")].value.options;
          this.InventoryDictionaries =
          res.data[num.indexOf("库存条件")].value.options;
      });
    },
    updateandoror() {
      console.log( this.ScreeningConditions);
      this.getListData.materialstate = this.ScreeningConditions[0].state;
      this.getListData.overlockstate = this.ScreeningConditions[1].state;
      this.getListData.Elementdescriptionstate = this.ScreeningConditions[2].state;
      this.getListData.Patternstylestate = this.ScreeningConditions[3].state;
      this.getListData.Inventorystate = this.ScreeningConditions[4].state;

    },
    FilterCriteriaDetailscheckboxClassification() {
      console.log(5555)
      console.log(this.materialDictionaries)
      console.log(this.InventoryDictionaries)
      console.log(6666)

      // 选中项 this.FilterCriteriaDetailscheckbox
      this.getListData.materialstateClassification = []
      this.getListData.overlockstateClassification = []
      this.getListData.ElementdescriptionstateClassification = []
      this.getListData.PatternstylestateClassification = []
      this.getListData.InventorystateClassification = []


      for (let index = 0; index < this.FilterCriteriaDetailscheckbox.length; index++) {
        //检索materialDictionaries，分类至materialClassification
        // 材料
        if (this.materialDictionaries.indexOf(this.FilterCriteriaDetailscheckbox[index]) !== -1) {
          this.getListData.materialstateClassification.push(
            this.materialDictionaries[
              this.materialDictionaries.indexOf(
                this.FilterCriteriaDetailscheckbox[index]
              )
            ]
          );
        }

        // 波边
        if (this.overlockDictionaries.indexOf(this.FilterCriteriaDetailscheckbox[index]) !== -1) {
          this.getListData.overlockstateClassification.push(
            this.overlockDictionaries[
              this.overlockDictionaries.indexOf(
                this.FilterCriteriaDetailscheckbox[index]
              )
            ]
          );
          // console.log(this.getListData.overlockstateClassification);
        }

        // 元素
        if (this.ElementdescriptionDictionaries.indexOf(this.FilterCriteriaDetailscheckbox[index]) !== -1) {
          this.getListData.ElementdescriptionstateClassification.push(
            this.ElementdescriptionDictionaries[
              this.ElementdescriptionDictionaries.indexOf(
                this.FilterCriteriaDetailscheckbox[index]
              )
            ]
          );
          // console.log(this.getListData.ElementdescriptionstateClassification);
        }

        // 风格
        if (this.PatternstyleDictionaries.indexOf(this.FilterCriteriaDetailscheckbox[index]) !== -1) {
          this.getListData.PatternstylestateClassification.push(
            this.PatternstyleDictionaries[
              this.PatternstyleDictionaries.indexOf(
                this.FilterCriteriaDetailscheckbox[index]
              )
            ]
          );
          // console.log(this.getListData.PatternstylestateClassification);
        }

         // 库存
         if (this.InventoryDictionaries.indexOf(this.FilterCriteriaDetailscheckbox[index]) !== -1) {
          this.getListData.InventorystateClassification.push(
            this.InventoryDictionaries[
              this.InventoryDictionaries.indexOf(
                this.FilterCriteriaDetailscheckbox[index]
              )
            ]
          );
          // console.log(this.getListData.PatternstylestateClassification);
        }
      }
    },

    hideBlueBorder(){
      let AllPattern = document.getElementsByClassName('AllPattern')[0];
      let divMain = document.getElementsByClassName("divMain")[0];
      if (this.Arrow == true) {
        this.Arrow = false;
        AllPattern.style.height = '79.33px';
        divMain.style.height = `${divMain.offsetHeight - 500}px`;
        this.Arrowclass = 'bottom-arrow';
      }else{
        this.Arrow = true;
        AllPattern.style.height = '579.33px';
        divMain.style.height = `${divMain.offsetHeight + 500}px`;
        this.Arrowclass = 'top-arrow';
      }
    },

    searchCZ(){
      let that = this;

      this.getListData = {
        pageNo: 1,
        pageSize: 20,
        useradio: "",
        // ClothingStyle: [],
        ClothingStyleradio: "",
        HightohighInputMin: "",
        HightohighInputMax: "",
        LowtolowInputMin: "",
        LowtolowInputMax: "",
        FlowerHeightMin: "",
        FlowerHeightMax: "",
        elasticradio: "",
        Machinemodelradio: "",
        NumberOfStitchesradio: "",
        Machinefunctionradio: "",
        texturesradio: "",
        structureradio: "",
        ScreeningConditionsradio: "",
        // FilterCriteriaDetailscheckbox: [],

        materialstateClassification: [],
        overlockstateClassification: [],
        ElementdescriptionstateClassification: [],
        PatternstylestateClassification: [],
        InventorystateClassification: [],

        materialstate: null,
        overlockstate: null,
        Elementdescriptionstate: null,
        Patternstylestate: null,
        Inventorystate: null,
        yearvalue: "",
        DevelopmentSeasonvalue: "",
        customervalue:"",
        keyword: "",
        searchPicture: that.getListData.searchPicture
      }
      this.FilterCriteriaDetailscheckbox = [];
      this.ScreeningConditions = [
        { id: 1, class: "useNone", state: null, name: "材料", ListDataName: 'materialstate' },
        { id: 2, class: "useNone", state: null, name: "波边", ListDataName: 'overlockstate' },
        { id: 3, class: "useNone", state: null, name: "元素描述", ListDataName: 'Elementdescriptionstate' },
        { id: 4, class: "useNone", state: null, name: "风格", ListDataName: 'Patternstylestate' },
        { id: 5, class: "useNone", state: null, name: "库存条件", ListDataName: 'Inventorystate' },
      ];
    },
  },
};
</script>


<style>
/* 外层 */
.divMain {
  width: 1641px;
  /* height: 1500px; */
  /* height: 1445px; 2行8个 */
  /* height: 1610px; 展开后*/

  /* height: 2515px; */
  /* 760+Exhibition */
  margin: 15px auto;
  border-radius: 10px;
  box-shadow: 3px 3px 12px 5px rgba(0, 0, 0, 0.15);
  background-color: #fbfbfb;
  padding: 0px;
  position: relative;
}

/* 搜索框 */
.search {
  width: 605px;
  height: 52px;
  position: relative;
  left: 450px;
  margin: 0px 0 0 0;
  padding: 6px 0 0 0;
}
.searchInput .el-input__inner {
  width: 754px;
  height: 46px;
  border: 0.5px solid #90959c;
  border-radius: 15px;
}
.searchInput .el-input__icon {
  line-height: 48px;
}
.searchbutton {
  position: absolute;
  width: 104px;
  height: 46px;
  left: 650px;
  top: 6px;
  background: #1890ff;
  border-radius: 0px 15px 15px 0px;
  font-family: Roboto;
  font-style: normal;
  font-weight: 900;
  font-size: 20px;
  line-height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  user-select: none;
}

.searchCZ {
  position: absolute;
    width: 104px;
    height: 46px;
    left: 765px;
    top: 6px;
    /* background: #1890ff; */
    /* border-radius: 0px 15px 15px 0px; */
    font-family: Roboto;
    font-style: normal;
    font-weight: 900;
    font-size: 20px;
    /* line-height: 24px; */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #ffffff;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 大类选择 */
.SelectCustomerBlock {
  position: relative;
  height: 37px;
  display: flex;
}
.SelectCustomers {
  height: 30px;
  font-family: Alibaba Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 30px;
  color: #afafaf;
}
.SelectCustomer1 {
  position: absolute;
  left: 448px;
  top: 7px;
}
.SelectCustomer2 {
  position: absolute;
  left: 684px;
  top: 7px;
}
.SelectCustomer3 {
  position: absolute;
  left: 934px;
  top: 7px;
}
.SelectCustomerBlocks1 .el-select {
  position: absolute;
  left: 528px;
  top: 7px;
}
.SelectCustomerBlocks2 .el-select {
  position: absolute;
  left: 760px;
  top: 7px;
}
.SelectCustomerBlocks3 .el-select {
  position: absolute;
  left: 1003px;
  top: 7px;
}
.SelectCustomerBlock .el-input__inner {
  width: 138px;
  height: 30px;
  background: #f1efef;
  border-radius: 10px;
}
.SelectCustomerBlock .el-input__icon {
  line-height: 30px;
}

/* 图片搜索 */
.PictureSearch {
  display: none;
  justify-content: center;
  width: 754px;
  height: 187px;
  position: relative;
  bottom: 31px;
  left: 448px;
  background: rgba(251, 251, 251, 1);
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
  border-radius: 15px;
}
.PictureSearch .el-upload-list{
  display: none;
  width: 674px;
  height: 80px;
  margin-top: 2px;
  position: absolute;
  top: -10px;
}
.PictureSearchflex {
  display: flex;
}
.PictureSearchnone {
  display: none;
}
.PictureSearch .el-upload-dragger {
  width: 674px;
  height: 80px;
  margin-top: 2px;
}
.PictureSearch .el-upload-dragger .el-icon-upload {
  margin: 2px 0 0px;
}

/* 多条件筛选 */
.top-arrow::after {
  display: inline-block;
  content: " ";
  height: 10px;
  width: 10px;
  border-width: 3px 3px 0 0;
  /* border-color: #0177ff; */
  margin-left: 5px;
  border-color: #6b6b6b;
  border-style: solid;
  transform: matrix(0.5, -0.5, 0.5, 0.5, 0, 0);
  position: absolute;
  /* left: 75px; */
  top: 8px;
}
.bottom-arrow::after {
  display: inline-block;
  content: " ";
  height: 10px;
  width: 10px;
  border-width: 3px 3px 0 0;
  margin-left: 5px;
  border-color: #6b6b6b;
  border-style: solid;
  transform: matrix(0.5, 0.5, 0.5, -0.5, 0, 0);
  position: absolute;
  /* left: 75px; */
  top: 5px;
}
.hideBlueBorderbutton{
  height: 24px;
  width: 100px;
  line-height: 24px;
  border: solid 1px #e8e8e8;
  background: #f6f6f6;
  color: #6b6b6b;
  position: absolute;
  left: 1040px;
  top: 25px;
  padding-left: 12px;
  -moz-user-select:none;/*火狐*/
  -webkit-user-select:none;/*webkit浏览器*/
  -ms-user-select:none;/*IE10*/
  -khtml-user-select:none;/*早期浏览器*/
  user-select:none;
}

.AllPattern {
  position: relative;
  height: 579.33px;
}
.AllPatternTitles {
  width: 146.67px;
  display: flex;
  position: absolute;
  left: 257px;
  flex-direction: column;
}
.AllPatternTitle {
  width: 146.67px;
  height: 53.33px;
  font-family: HarmonyOS Sans;
  font-style: normal;
  font-weight: 500;
  font-size: 18.6667px;
  line-height: 53px;
  text-align: center;
}
.AllPatternTitleDecoration {
  width: 146.67px;
  height: 4px;
  background: #1890ff;
  border-radius: 4px 4px 0px 0px;
}
.BlueBorder {
  width: 1161px;
  height: 522px;
  position: absolute;
  left: 245px;
  top: 58px;
  border: 1px solid rgba(24, 144, 255, 0.8);
  box-sizing: border-box;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.BigCategoryTitle {
  width: 115px;
  margin-left: 35px;
  height: 23px;
  display: inline-block;
  font-family: Alibaba Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 22px;
  align-items: center;
  color: #afafaf;
}
.BigCategoryContent {
  width: 120px;
  height: 23px;
  font-family: Alibaba Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 22px;
  display: inline-block;
  align-items: center;
  text-align: center;
  /* color: #1890FF; */
  color: #000;
}
.BlueBorder .el-radio__input {
  display: none;
}
.BlueBorder .el-radio__label {
  font-size: 16px;
  padding: 0px;
}
.BlueBorder .el-radio {
  line-height: 22px;
  color: #000;
  margin: 0px;
}
.ClothingStyles {
  display: inline-block;
}
.useNone {
  display: none;
}
.useBlock {
  display: inline-block;
}
.BigCategoryInput {
  width: 72px;
  height: 28px;
  border: 1px solid #afafaf;
  box-sizing: border-box;
  border-radius: 8px;
  text-align: center;
}
.BigCategoryInput::-webkit-input-placeholder{
  color: #e0e0e0;
}
.BigCategoryInput::-webkit-outer-spin-button,
.BigCategoryInput::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
.BigCategoryInput {
  -moz-appearance: textfield;
}
.andor .el-radio__input {
  display: inline-block;
}
.andor .el-radio__label {
  font-size: 14px;
}
.andor .el-radio {
  line-height: 22px;
  color: #606266;
}
.FilterCriteriaDetails {
  width: 777.39px;
  height: 40.08px;
  margin-left: 30px;
  background: #f4f4f4;
  border-radius: 10px;
  display: flex;
  align-items: center;
}
.FilterCriteriaDetails .el-checkbox__input {
  display: none;
}
.FilterCriteriaDetails .el-checkbox__label {
  padding: 0px;
}
.FilterCriteriaDetails .BigCategoryContent {
  width: 80px;
}

/* 展示区 */
.Exhibition {
  width: 1516px;
  /* height: 695px; */
  position: relative;
  top: 16px;
  left: 80px;
}
.Exhibition .el-row {
  margin-bottom: 15px;
}
.Exhibition .el-card {
  border-radius: 10px;
  margin: 0 37px 10px 0;
}
.Exhibition .imagebox{
  width: 330px;
  height: 240px;
  /* display: block; */
  overflow: hidden;
}
.Exhibition .image {
  /* width: 330px; */
  /* height: 240px; */
  /* display: block; */

  height: 100%;
  display: block;
  margin: 0 auto;
}
.Exhibition .image:hover{
  transition: all 0.3s;
  /* object-fit: cover; */
  transform: scale(1.5);
}
.goods {
  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-between; */
  justify-content: flex-start;
  align-content: flex-start;
  /* align-content: space-between; */
  /* height: 1755px; */
}
.Vector {
  width: 36px;
  height: 36px;
  position: absolute;
  bottom: 5px;
  right: 11px;
  display: flex;
  align-items: center;
}

/* 订单列表外 */
.Orderlist {
  font-family: PingFang SC;
  font-style: normal;
  font-weight: bold;
  font-size: 24px;
  line-height: 22px;
  width: 96px;
  height: 22px;
  position: absolute;
  right: 41px;
  bottom: 26px;
  color: #000000;
}
/* 订单列表内 */
.dialogTitle .el-dialog {
  background: #f3f3f3;
  border-radius: 20px;
  margin-top: 6vh !important;
}
.dialogTitle .el-dialog__title {
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 24px;
  color: #000000;
}
.Orderblock {
  width: 583px;
  height: 77px;
  margin-bottom: 6px;
  background: #ffffff;
  border-radius: 5px;
  position: relative;
}
.OrderblockTitle {
  font-family: PingFang SC;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 22px;
  color: #000000;
  position: absolute;
  top: 11px;
  left: 80px;
}
.Orderblock .el-input-number {
  position: absolute;
  top: 42px;
  left: 348px;
}
.Orderblockdelete {
  font-family: Alibaba PuHuiTi;
  font-style: normal;
  font-weight: normal;
  font-size: 20px;
  line-height: 22px;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 57px;
  height: 64px;
  background-color: #fb4f4f;
  position: absolute;
  left: 500px;
  top: 7px;
  user-select: none;
}
.OrderSelectionCustomer .el-input__inner {
  width: 170px;
  height: 35px;
  background: #ffffff;
  border-radius: 10px;
}
.OrderSelectionCustomer .el-input__icon {
  line-height: 30px;
}
.dialogtypeface {
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 22px;
  color: #000000;
  margin: 0px 36px 0 0;
}
.dialogflex {
  display: flex;
  align-items: center;
  margin: 20px 0 0 0;
}

/* 其他 */
.marginright1 {
  margin-right: 20px;
}

/* .clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
} */
</style>
